<template>
	<view class="order-item">
		<view class="item-provider marginBottom10 ">
			<view class="p-left icon-text" >
				<image style="width: 60rpx;height: 60rpx;" :src="order.companyAvatar"></image>
				<text>{{order.companyName}}</text>
				<uni-icons style="margin-left: 8rpx;"  type="right" size="16"></uni-icons>
			</view>
			<text style="color: orangered;">{{orderStatusMap[order.orderStatus]}}</text>
		</view>
		<view class="marginBottom10" v-for="(prod,i) in order.orders" :key="i">
			<view class="item-product">
				<view class="prod-img">
					<image style="width: 120rpx;height: 120rpx;border-radius: 20rpx;" :src="prod.specificationImg"></image>
				</view>
				<view class="prod-center">
					<view class="prod-name">
						<up-text size="12" :lines="1" :text="prod.productName" ></up-text>
					</view>
					<view class="spec-name">
						<up-text size="12" :lines="1" :text="prod.specificationName"  type="info" ></up-text>
					</view>
				</view>
				<view class="prod-right">
					<view style="text-align: end;">
						<text class="text-price">
							<text class="text-p-i">
								{{'￥'}}
							</text>
							<text class="text-p-p">
								{{prod.price}}
							</text>
						</text>
					</view>
					<view style="text-align: end;">
						<text class="colorInfo">
							<text class="text-p-i">
								{{'x'}}
							</text>
							<text>
								{{prod.quantity}}
							</text>
						</text>
					</view>
					<view class="text-p-i colorWarning" v-if="prod.isRefund">
						{{refundStatusMap[prod.refundStatus]}}
					</view>
				</view>
			</view>
			<view class="item-btn" style="text-align: right;">
				<button class="btnInline marginLeft10 btnMiniSize" size="mini"  type="default" plain="true">申请售后</button>
				<button class="btnInline marginLeft10 btnMiniSize" size="mini"  type="warn" plain="true">加入购物车</button>
			</view>
		</view>
		<view style="text-align: right;" class="text-price">
			<text >
				{{'合计：'}}
			</text>
			<text class="text-p-i">
				{{'￥'}}
			</text>
			<text class="text-p-p">
				{{order.orderAmount}}
			</text>
		</view>
		<view class="order-btn marginTop10" style="text-align: end;">
			<button class="btnInline"  type="default" plain="true">删除订单</button>
			<button class="btnInline marginLeft10"   type="default" plain="true">申请售后</button>
			<!-- <button size="mini"  type="warn" plain="true">再次购买</button> -->
			<button class="btnInline marginLeft10"   type="warn" plain="true">加入购物车</button>
		</view>
	</view>
</template>

<script setup>
import { ref,defineEmits, defineProps} from 'vue';
const orderStatusMap = ref({
  0:'待付款',
  1:'已付款',
  2:'交易完成',
  3:'交易取消',
  4:'交易关闭',
  5:'买家部分付款',
  6:'已发货',
})
const refundStatusMap = ref({
  0:'待处理',
  1:'退款成功',
  2:'部分退款',
  3:'退款关闭',
})
const emits =	defineEmits();
const props = 	defineProps(['isDetail','order','orderId'])


</script>

<style lang="scss" scoped>
	.order-item{
		background-color: white;
		padding: 20rpx;
		margin-bottom: 20rpx;
		.item-provider{
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 32rpx;
		}
		.item-product{
			line-height: 40rpx;
			display: flex;
			justify-content: space-between;
			// align-items: center;
			.prod-img{
				width: 120rpx;
				height: 120rpx;
				border: 1px dashed gainsboro;
				border-radius: 20rpx;
			}
			.prod-center{
				padding: 10rpx 16rpx 0rpx 16rpx;
				flex: 1;
			}
			.prod-right{
				padding-top: 8rpx;
			}
		}
		.order-btn{
			// display: flex;
			// justify-content: end;
		}
	}
	
	.text-price{
		// color: red;
		font-size: 30rpx;
		.text-p-i{
			font-size: 24rpx;
		}
	}
</style>